<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__monitor">
		
		 <div id="dd">
			 <div id="headDiv" style="height: 55px;">
				 <p>
					 <span><b style="color: #6a9cd5;">系统：</b>{{ dataForm.sys.os }}</span> 
					 <span alert="项目不间断运行时长"><b style="color: #6a9cd5;">运行时长：</b>{{ dataForm.sys.day }}</span> 
					 <span><b style="color: #6a9cd5;">IP：</b>{{ dataForm.sys.ip }}</span>
				 </p>
				 <p>
					 <span><b style="color: #6a9cd5;">CPU类型：</b>{{ dataForm.cpu.name }}</span> 
					 <span><b style="color: #6a9cd5;">CPU核心：</b>{{ dataForm.cpu.package }}  {{ dataForm.cpu.core }} {{ dataForm.cpu.logic }}</span> 
				 </p>
			 </div>
			 <div id="topDiv" style="height: 200px;">
				 <div id="cpuDiv" style="width: 160px; height: 160px;margin-top: 10px; "></div>
				 <div id="memoryDiv" style="width: 160px; height: 160px;margin-top: 10px; "></div>
				 <div id="swapDiv" style="width: 160px; height: 160px;margin-top: 10px; "></div>
				 <div id="diskDiv" style="width: 160px; height: 160px;margin-top: 10px; "></div>
			 </div>
			 <div id="bottomDiv" >
				 <div id="cpuDiv2" style="width: 50%; height: 500px; "></div>
				 <div id="memoryDiv2" style="width: 50%;height: 500px; "></div>
			 </div>
		 </div>
		 
    </div>
  </el-card>
</template>

<script>
import { setMd5 } from '@/utils'
import Cookies from 'js-cookie'
// import echarts from 'echarts'

//这里使用了局部引入echarts，若您想全局引入，请在main.js中按注释内容开启
//局部引入使用echarts.init()，而全局引入使用this.$echarts.init()
import * as echarts from "echarts"; 

export default {
  data () {
    return {
		//趋势图字段
		times:[],
		optionCpuValues:[],
		optionMemoryValues:[],
		timer: null,
		
		//返回数据
		dataForm:{
			sys: {
			  os: "请求中，请耐心等待...",
			  day: "请求中，请耐心等待...",
			  ip: "请求中，请耐心等待..."
			},
			cpu: {
			  name: "请求中，请耐心等待...",
			  package: "请求中，请耐心等待...",
			  core: "",
			  coreNumber: 0,
			  logic: "请求中，请耐心等待...",
			  used: "",
			  idle: "",
			  user: 0
			},
			memory: {
			  total: "15.8 GiB",
			  available: "7.4 GiB",
			  used: "8.4 GiB",
			  usageRate: "53.01"
			},
			swap: {
			  total: "2.4 GiB",
			  used: "31.2 MiB",
			  available: "2.3 GiB",
			  usageRate: "1.28"
			},
			disk: {
			  total: "476.52GB   ",
			  available: "407.70GB   ",
			  used: "68.82GB   ",
			  usageRate: "14.44"
			},
			time: "09:29:33",
		}
		
	}
  },
  mounted() {
	  this.getDetail();
	  this.timer = setInterval(() => {
	  		this.getDetail()
	  }, 3000)
  },
  components: {
	  
  },
  methods:{
	  getDetail() {
		  this.$http.get(`/pc/monitor`).then(({ data: res }) => {
		      if(res.code === 200){
		  			this.dataForm = res.data;
					
					this.initYbp("cpuDiv"
						,"CPU使用率"
						,res.data.cpu.user
						,res.data.cpu.used
						,(res.data.cpu.coreNumber + ' 核心')
						,(parseFloat(res.data.cpu.used) / 100)
					);
					
					this.initYbp("memoryDiv"
						,"内存使用率"
						,parseFloat(res.data.memory.used)
						,res.data.memory.usageRate
						,res.data.memory.used + ' / ' + res.data.memory.total
						,(parseFloat(res.data.memory.usageRate) / 100)
					);
					
					this.initYbp("swapDiv"
						,"交换区使用率"
						,parseFloat(this.dataForm.swap.used.replace("GB",""))
						,res.data.swap.usageRate
						,res.data.swap.used + ' / ' + res.data.swap.total
						,(parseFloat(res.data.swap.usageRate) / 100)
					);
					
					this.initYbp("diskDiv"
						,"磁盘使用率"
						,parseFloat(res.data.disk.used.replace("GB",""))
						,res.data.disk.usageRate
						,res.data.disk.used + ' / ' + res.data.disk.total
						,(parseFloat(res.data.disk.usageRate) / 100)
					);
					
					
					var arrSize = this.times.length
					if( arrSize > 8 ){
						this.times.shift()
						this.optionCpuValues.shift()
						this.optionMemoryValues.shift()
					}
					this.times = this.times.concat(res.data.time)
					this.optionCpuValues = this.optionCpuValues.concat(parseFloat(res.data.cpu.used))
					this.optionMemoryValues = this.optionMemoryValues.concat(parseFloat(res.data.memory.usageRate))
					this.initQushitu("cpuDiv2",this.optionCpuValues,this.times);
					this.initQushitu("memoryDiv2",this.optionMemoryValues,this.times);
					
		      }
		   })
		   
	  },
	  
	  //仪表盘
	  initYbp(ybpDiv,ybpTitle,ybpValue,ybpBfb,ybpRemark,ybpHd){
		  var ybpData = {
			title: [
			  {
				text: ybpTitle,
			   left: "center",
				top: -3,
				textStyle: {
				  color: "#b3b3b3",
				  fontSize: 12,
				  fontWeight: "normal",
				},
			  },
			  {
				text: ybpRemark,
				bottom: "10px",
				left: "center",
				textStyle: {
				  color: "#b3b3b3",
				  fontSize: 12,
				  fontWeight: "normal",
				},
			  },
			],
			grid: {
			  height: 200,
			  left: 0,
			  top: 0,
			  bottom: 0,
			  right: 0,
			},
			series: [
			  {
				name: "仪表盘",
				type: "gauge",
				axisLine: {
				  lineStyle: {
					color: [
					  [ybpHd, "#5DD1FA"],
					  [1, "#f7f9fc"],
					],
					width: 10,
				  
				  },
				},
				axisLabel: {
				  show: false,
				},
				axisTick: {
				  show: false,
				},
				splitLine: {
				  show: false,
				},
				itemStyle: {
				  show: false,
				},
				title: {
				  color: "#7f7f7f",
				  fontSize: 16,
				  fontWeight: "bolder",
				  top: -5
				},
			  //数值
				detail: {
				  offsetCenter: [0, "-15%"],
				  textStyle: {
					fontSize: "20",
					fontWeight: "bolder",
					color: "#000"
				  },
				},
				pointer: {
				  show: false,
				},
				data: [
				  {
					name: "",
					value: ybpValue,
				  },
				],
			  },
			  {
				//下面那个
				title: {
				  color: "#7f7f7f",
				  fontSize: 13,
				  offsetCenter: [0, "40%"],
				},
				type: "gauge",
				splitNumber: 0,
				startAngle: 0,
				endAngle: 0,
				splitLine: {
				  show: false,
				},
				axisLabel: {
				  show: false,
				},
				pointer: {
				  show: false,
				},
				detail: {
				  show: false,
				},
				data: [
				  {
					name: ybpBfb+"%",
				  },
				],
			  },
			]
					  
		  }
		  echarts.init(document.getElementById(ybpDiv)).setOption(ybpData);
	  },
	  
	  //折线图区域
	  initQushitu(divId,vs,ts){
		  var tttt = {
			backgroundColor: "#FFF", //折线图背景
			tooltip: {},
			grid: {
			  top: "8%",
			  left: "1%",
			  right: "4%",
			  bottom: "8%",
			  containLabel: true,
			},
			xAxis: [
			  {
				type: "category",
				boundaryGap: false,
				axisLine: {
				  //坐标轴轴线相关设置。数学上的x轴
				  show: true,
				  lineStyle: {
					color: "#233e64",
				  },
				},
				axisLabel: {
				  //坐标轴刻度标签的相关设置
					color: "#6a9cd5",
					margin: 15,
				},
				axisTick: { show: false },
				data: ts, //时间
			  },
			],
			yAxis: [
			  {
				type: "value",
				min: 0,
				max: 100,
				splitNumber: 6,
				splitLine: {
				  show: true,
				  lineStyle: {
					color: "#233e64",
				  },
				},
				axisLine: { show: false },
				axisLabel: {
				  margin: 20,
					color: "#6a9cd5",
				},
				axisTick: { show: false },
			  },
			],
			series: [
			  {
				name: "异常流量",
				type: "line",
				smooth: true, //是否平滑曲线显示
				// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
				symbolSize: 0,
		  
				lineStyle: {
				  // normal: {
					color: "#3deaff", // 线条颜色
				  // },
				},
				areaStyle: {
				  //区域填充样式
				  // normal: {
					//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					color: new echarts.graphic.LinearGradient(
					  0,
					  0,
					  0,
					  1,
					  [
						{ offset: 0, color: "rgba(61,234,255, 0.9)" },
						{ offset: 0.7, color: "rgba(61,234,255, 0)" },
					  ],
					  false
					),
		  
					shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
					shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
				  // },
				},
				data: vs, //走势数据
			  },
			],
		  }
		  echarts.init(document.getElementById(divId)).setOption(tttt)
	  }
	  
  }
  ,
  destroyed () {
	  this.times = [];
	  this.optionCpuValues = []
	  this.optionMemoryValues = []
	  clearInterval(this.timer)
	  this.timer = null;
  }
}
</script>

<style>
	#topDiv{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items:center;
	}
	
	#bottomDiv{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items:center;
	}
	
	#headDiv span{
		margin-right: 25px;
	}
	
</style>